<template>
  <a-drawer :width="700" v-model:visible="visible" title="资源配置">
    <template #footer>
      <a-space>
        <a-button @click="visible = false">取消</a-button>
        <a-button @click="handleOk" type="primary">确认</a-button>
      </a-space>
    </template>
    <div>
      <a-radio-group v-model="resourceType" @change="choiceId = 0">
        <a-radio :value="1"> 产线资源</a-radio>
        <a-radio :value="2"> 设备资源</a-radio>
        <a-radio :value="3"> 工位资源</a-radio>
      </a-radio-group>
    </div>
    <a-row :gutter="16">
      <!-- 产线 -->
      <template v-if="resourceType === 1">
        <a-col
          :span="12"
          v-for="item in lineList"
          :key="item.id"
          class="success"
        >
          <div class="box borclass" @click="choiceId = item.id">
            <div class="box-top bgclass">
              <div class="checkbox">
                <a-checkbox :model-value="choiceId === item.id" />
              </div>
              <div class="box-top-info">
                <div>{{ item.lineName }}</div>
                <div>{{ item.lineCode }}</div>
              </div>
            </div>
            <div class="box-bottom cclass">0/100000</div>
          </div>
        </a-col>
        <a-empty v-if="lineList.length === 0" />
        <TableSon :type="resourceType" :name="choiceName" :data="[]" />
      </template>

      <!-- 设备 -->
      <template v-if="resourceType === 2">
        <a-col
          :span="12"
          v-for="item in equipmentList"
          :key="item.id"
          class="danger"
        >
          <div class="box borclass" @click="choiceId = item.id">
            <div class="box-top bgclass">
              <div class="checkbox">
                <a-checkbox :model-value="choiceId === item.id" />
              </div>
              <div class="box-top-info">
                <div>{{ item.deviceName }}</div>
                <div>{{ item.deviceCoding }}</div>
              </div>
            </div>
            <div class="box-bottom cclass">0/100000</div>
          </div>
        </a-col>
        <a-empty v-if="equipmentList.length === 0" />
        <TableSon :type="resourceType" :name="choiceName" :data="[]" />
      </template>

      <!-- 工位 -->
      <template v-if="resourceType === 3">
        <a-col
          :span="12"
          v-for="item in stationList"
          :key="item.id"
          class="warning"
        >
          <div class="box borclass" @click="choiceId = item.id">
            <div class="box-top bgclass">
              <div class="checkbox">
                <a-checkbox :model-value="choiceId === item.id" />
              </div>
              <div class="box-top-info">
                <div>{{ item.stationName }}</div>
                <div>{{ item.stationCode }}</div>
              </div>
            </div>
            <div class="box-bottom cclass">0/100000</div>
          </div>
        </a-col>
        <a-empty v-if="stationList.length === 0" />
        <TableSon :type="resourceType" :name="choiceName" :data="[]" />
      </template>
    </a-row>
  </a-drawer>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue';
  import { GetFactoryResourcesPage } from '@/api/FactoryModeling';
  import { Message } from '@arco-design/web-vue';
  import TableSon from './TableSon.vue';

  //资源类型
  let resourceType = ref(0);
  //选择的id
  let choiceId = ref(0);

  // 修改的数据ID

  const index = ref<number | null>(null);

  let lineList = ref<any[]>([]); //产线
  let equipmentList = ref<any[]>([]); //设备
  let stationList = ref<any[]>([]); //工位

  let visible = ref(false);
  let emit = defineEmits(['handleOk']);
  const choiceName = computed(() => {
    if (resourceType.value && choiceId.value) {
      let name = '';
      switch (resourceType.value) {
        case 1:
          name = lineList.value.filter((ele) => ele.id === choiceId.value)[0]
            .lineName;
          break;
        case 2:
          name = equipmentList.value.filter(
            (ele) => ele.id === choiceId.value
          )[0].deviceName;
          break;
        case 3:
          name = stationList.value.filter((ele) => ele.id === choiceId.value)[0]
            .stationName;
          break;
        default:
          break;
      }

      return name;
    } else {
      return '';
    }
  });
  let handleOk = () => {
    if (!resourceType.value || !choiceId.value) {
      return Message.warning('请选择数据');
    }

    emit('handleOk', {
      index: index.value,
      resourceType: resourceType.value,
      choiceId: choiceId.value,
      choiceName: choiceName.value,
    });
    visible.value = false;
  };

  defineExpose({
    /** 塞选择数据 */
    setData(rowIndex: number, type?: number, id?: number) {
      index.value = rowIndex;
      resourceType.value = type || 1;
      choiceId.value = id || 0;
      visible.value = true;
    },
    /** 通过车间id初始化资源数据 */
    async setWorkShopAndProcessGroup(
      workshopId: number,
      processGroupId: number
    ) {
      if (!workshopId && !processGroupId) return;
      let { resourcesModel } = await GetFactoryResourcesPage({
        workshopId,
        processGroupId,
      });
      if (!Array.isArray(resourcesModel)) return;

      resourcesModel.forEach(
        ({
          type,
          lineProcessGroupData,
          stationProcessGroupData,
          equipmentBo,
        }) => {
          if (
            type === 2 &&
            Array.isArray(lineProcessGroupData) &&
            lineProcessGroupData[0]
          ) {
            lineList.value.push(lineProcessGroupData[0]);
          } else if (
            type === 1 &&
            Array.isArray(stationProcessGroupData) &&
            stationProcessGroupData[0]
          ) {
            stationList.value.push(stationProcessGroupData[0]);
          } else if (
            type === 3 &&
            Array.isArray(equipmentBo) &&
            equipmentBo[0]
          ) {
            equipmentList.value.push(equipmentBo[0]);
          }
        }
      );
    },
  });
</script>

<style scoped lang="less">
  .box {
    margin-top: 10px;
    height: 90px;
    &-top {
      cursor: pointer;
      color: #fff;
      height: 60px;
      position: relative;
      .checkbox {
        position: absolute;
        top: 10px;
        right: 10px;
      }
      &-info {
        line-height: 20px;
        padding: 10px;
      }
    }
    &-bottom {
      line-height: 30px;
      padding-left: 10px;
    }
  }
  .success {
    .bgclass {
      background: rgb(var(--green-5));
    }
    .cclass {
      color: rgb(var(--green-5));
    }
    .borclass {
      border: 1px rgb(var(--green-5)) solid;
    }
  }

  .warning {
    .bgclass {
      background: rgb(var(--orange-5));
    }
    .cclass {
      color: rgb(var(--orange-5));
    }
    .borclass {
      border: 1px rgb(var(--orange-5)) solid;
    }
  }
  .danger {
    .bgclass {
      background: rgb(var(--red-5));
    }
    .cclass {
      color: rgb(var(--red-5));
    }
    .borclass {
      border: 1px rgb(var(--red-5)) solid;
    }
  }
</style>
